<template>
  <div class="article_add">
    <div class="article_top_box">
      <div class="article_title_box">
        <input v-model="articleForm.articleTitle" />
      </div>
      <div class="save_box">
        <el-button type="primary" plain>草稿箱</el-button>
        <article-add-dropdown :id="id" :articleForm="articleForm">
        </article-add-dropdown>
      </div>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <div class="header_img"></div>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item> Action 2 </el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item>Action 4</el-dropdown-item>
            <el-dropdown-item>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <MdEditor
      :toolbarsExclude="['github']"
      :modelValue="articleForm.articleContent"
      @onChange="changeEditor"
    />
  </div>
</template>

<script setup lang="ts">
// vue 框架插件
import { onMounted, provide, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

// api 接口
import { addArticleApi, findArticleApi, updateArticleApi } from '@/api/article'
import articleAddDropdown from './components/articleAddDropdown.vue'

import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { ElMessage } from 'element-plus'
import router from '@/router'
const route = useRoute()

onMounted(() => {
  init()
})

let id = ref('') // 文章id
let articleForm: any = reactive({
  articleTitle: '', // 文章名称
  articleImg: '', // 文章封面
  articleClass: [], // 文章分类
  articleLabels: [], // 文章标签
  articleContent: '', // 文章内容
  articleStatus: 1, // 文章是否可见
  articleAbstract: '', // 文章摘要
})
const init = async () => {
  if (route.query.id) {
    await getArticleDetail()
  }
}
const getArticleDetail = async () => {
  let res: any = await findArticleApi(route.query.id)
  if (res.status == 0) {
    articleForm.articleTitle = res.data.articleTitle
    articleForm.articleLabels = res.data.articleLabels
    articleForm.articleImg = res.data.articleImg
    articleForm.articleClass = res.data.articleClass
    articleForm.articleContent = res.data.articleContent
    articleForm.articleStatus = res.data.articleStatus
    articleForm.articleAbstract = res.data.articleAbstract
    id.value = res.data.id
  }
}

const changeEditor = (Content: string) => {
  articleForm.articleContent = Content
}
</script>
<style scoped lang="scss">
.article_add {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .article_top_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 27px;
    height: 64px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    .article_title_box {
      flex: 1;
      height: 64px;
      input {
        width: 100%;
        height: 64px;
        box-sizing: border-box;
        border: none;
        font-size: 24px;
        &:focus {
          outline: none;
          border: 1px solid #fff;
        }
      }
    }
    .header_img {
      margin-left: 20px;
      width: 32px;
      height: 32px;
      border-radius: 32px;
      background-color: #ccc;
      cursor: pointer;
    }
  }
  ::v-deep(#md-editor-v3) {
    flex: 1;
  }
}
</style>
